<template>
	<view class="list">
		<view class="box">
			<my-goods @click.native="toDetail(item.goods_id)" :item="item" v-for="(item, index) in dataList" :key="index"></my-goods>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品列表数据源
				dataList: [],
				// 搜索关键字
				Key: '',
				// 当前页
				pagenum: 1,
				// 页容量
				pagesize: 10,
				// 数据总条数
				total: 0,
				// 是否正在发送请求
				isLoading: false,
				// 判断数据源是否加载完毕
				finished: false
			};
		},
		onLoad(options) {
			// 得到搜素关键字
			this.key = options.key
			// 根据关键字发送请求到服务器
			this.getDataList()

		},
		methods: {
			// 根据关键字得到商品列表数据源
			async getDataList(bool) {
				// 将网络请求状态修改为 true
				this.isLoading = true
				let {
					data: res
				} = await uni.$http.get(
					`/api/public/v1/goods/search?query=${this.key}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
					)
				if (res.meta.status !== 200) return uni.$showMsg()
				this.dataList = [...this.dataList, ...res.message.goods]
				this.total = res.message.total
				// 将网络请求状态改为 false
				this.isLoading = false
				// 判断是否下啦
				if(bool){
					// 关闭下拉面板
					uni.stopPullDownRefresh()
				}
				// 判断数据源是否请求完毕
				if (this.dataList.length === this.total) {
					this.finished = true
					uni.showToast({
						title: '数据源加载完毕...'
					})
				}
			},
		    // 跳转到商品详情
		    toDetail (goods_id) {
		      uni.navigateTo({
		        url: `/pages/goods_detail/main?goods_id=${goods_id}`
		      })
		    },
		},
		// 上拉触底时会触发
		onReachBottom() {
			// 判断网络请求的状态
			if (this.isLoading) return
			// 判断数据源是否加载完毕
			if (this.finished) return uni.showToast({
				title: '数据源加载完毕...'
			})
			// 当前页+1
			this.pagenum += 1
			// 请求数据源
			this.getDataList()
		},
		// 下拉刷新监听事件
		onPullDownRefresh() {
			// 重置数据
			this.goodsList = []
			this.pagenum = 1
			this.total = 0
			this.isLoading = false
			this.finished = false
			// 重新获取数据源
			this.getDataList(true)
		}

	}
</script>

<style lang="scss">
	.list {
		.box {}
	}
</style>
